<template>
  <EnteringForm
    ref="enteringForm"
    v-bind="dialog"
		width="60%"
    @close="close"
    @submit="submit"
  >
    <el-form ref="formRef" :model="queryParams" :rules="rules" label-width="120px">
      <el-row type="flex" style="flex-wrap: wrap">
				<!-- <el-col :span="13" v-if="dialogType!='add'">
          <el-form-item label="编号:" prop="id">
						<span>{{ queryParams.id }}</span>
          </el-form-item>
        </el-col> -->
				<el-col :span="12">
          <el-form-item label="活动名称:" prop="name">
            <el-input
              v-model.trim="queryParams.name"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
				<el-col :xs="24" :sm="24" :lg="24">
					<!-- 22--{{ queryParams.avatar }} -->
					<el-form-item label="封面图:" prop="cover">
						<ImageUpload
								v-model="queryParams.cover"
								:limit="1"
						/>
					</el-form-item>
				</el-col>
				<!-- {{ shopList }} -->
				<el-col :xs="12" :sm="12" :lg="12">
					<el-form-item label="活动商家">
						<el-select
							v-model="queryParams.storeId"
							placeholder="请选择"
							style="width: 100%"
						>
							<el-option :label="item.name" :value="item.id" v-for="item in shopList" :key="item.id"/>
						</el-select>
					</el-form-item>
				</el-col>
        <el-col :span="12">
					<el-form-item label="参与人数:" prop="partNum">
						<el-input-number
							style="width:100%"
							controls-position="right" 
							:precision="0"
							:min="0"
							:max="99999999"
							v-model.trim="queryParams.partNum"
							placeholder="请输入"
							clearable
						/>
					</el-form-item>
				</el-col>
        <el-col :span="12">
					<el-form-item label="抽奖积分:" prop="integral">
						<el-input-number
							style="width:100%"
							controls-position="right" 
							:precision="0"
							:min="0"
							:max="99999999"
							v-model.trim="queryParams.integral"
							placeholder="请输入"
							clearable
						/>
					</el-form-item>
				</el-col>
				
        <!-- <el-col :span="12">
					<el-form-item label="满减限制:" prop="threshold">
						<el-input-number
							style="width:100%"
							controls-position="right"
							:precision="2"
							:min="0"
							:max="99999999"
							v-model.trim="queryParams.threshold"
							placeholder="请输入满减限制（使用门槛）"
							clearable
						/>
					</el-form-item>
				</el-col> -->
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item label="开奖开始时间:" prop="startTime">
            <el-time-select
              v-model="queryParams.startTime"
              style="width: 100%"
              :max-time="queryParams.endTime"
              placeholder="请选择"
              start="06:00"
              step="00:15"
              end="23:45"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item label="开奖结束时间:" prop="endTime">
            <el-time-select
              v-model="queryParams.endTime"
              style="width: 100%"
              :min-time="queryParams.startTime"
              placeholder="请选择"
              start="06:00"
              step="00:15"
              end="23:45"
            />
          </el-form-item>
        </el-col>
				<el-col :span="12">
					<el-form-item label="奖品数量:" prop="prizeNum">
						<el-input-number
							style="width:100%"
							controls-position="right" 
							:precision="0"
							:min="0"
							:max="99999999"
							v-model.trim="queryParams.prizeNum"
							placeholder="请输入"
							clearable
						/>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="24">
          <!-- 22--{{ queryParams.avatar }} -->
          <el-form-item label="活动图片:" prop="images">
            <ImageUpload
              v-model="queryParams.images"
              :limit="6"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
					<el-form-item label="赠送积分:" prop="integral">
						<el-input-number
							style="width:100%"
							controls-position="right" 
							:precision="0"
							:min="0"
							:max="99999999"
							v-model.trim="queryParams.integral"
							placeholder="请输入"
							clearable
						/>
					</el-form-item>
				</el-col> -->
      </el-row>
    </el-form>
  </EnteringForm>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
// import { 
//   listPage as shopListApi  //店铺列表
// } from '@/api/operates/shopList/index'
import { listPage, info, add, edit, del, changeStatusApi } from '@/api/operates/active.js'

const { proxy } = getCurrentInstance()
const emit = defineEmits(["success"]);
const dialogType = ref('')
const shopList = ref([])
const dialog = reactive({
  visible: false,
  title: "",
});
// const pickerOptions = (v) => {
// 			// console.log('vvv', v)
// 			return v.getTime() <= new Date().getTime() - 86400000;//  - 86400000是否包括当天
// 		}
const rules = reactive({
  // sellerId: [{ required: true, message: "请选择", trigger: "change" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  faceValue: [{ required: true, message: "请输入", trigger: "blur" }],
  publishNum: [{ required: true, message: "请输入", trigger: "blur" }],
  threshold: [{ required: true, message: "请输入", trigger: "blur" }],
  expireDay: [{ required: true, message: "请输入", trigger: "blur" }],
	
  sort: [{ required: true, message: "请输入", trigger: "blur" }],
  integral: [{ required: true, message: "请输入", trigger: "blur" }],
  cover: [{ required: true, message: "请上传", trigger: "blur" }],
  images: [{ required: true, message: "请上传", trigger: "blur" }],
  intro: [{ required: true, message: "请上传", trigger: "blur" }],
  enable: [{ required: true, message: "请选择", trigger: "change" }],
  recommend: [{ required: true, message: "请选择", trigger: "change" }],

});
const queryParams = ref({
	enable: 1,
	recommend: 0,
})

function init(type,list, record){
	// console.log('shopList', shopList)
  // getShopList()
	shopList.value = [
		{id:0, name:'全部'},
		...list
	]
	dialogType.value = type
	dialogType.value=='add' ? dialog.title='新增' : dialog.title='编辑'
	dialog.visible = true
	// 如果是编辑，回显数据
	if(dialogType.value=='edit'){
		queryParams.value = { ...record };
		let list = record.winningTime.split('~')
		queryParams.value.startTime = list[0]
		queryParams.value.endTime = list[1]
	}
};

// function getShopList(){
//   shopListApi({}).then((res)=>{
//     shopList.value = res.data.list
//   })
// }
function close(){
  dialog.visible = false;
  proxy.$refs.formRef.resetFields();
	queryParams.value = {}
};
function submit() {
  proxy.$refs.formRef.validate((valid) => {
    if (valid) {
      let query = {
        ...queryParams.value,
				winningTime: queryParams.value.startTime + '~' + queryParams.value.endTime
      }
      if(dialogType.value=='add'){
				add(query).then((res) => {
					if (res.code == 200) {
						ElMessage.success("新增成功");
						close();
						emit("success",'add');
					} else {
						ElMessage.error(res.message || "新增失败");
					}
				});
			} else {
				edit(query).then((res) => {
					if (res.code == 200) {
						ElMessage.success("编辑成功");
						close();
						emit("success",'edit');
					} else {
						ElMessage.error(res.message || "编辑失败");
					}
				});
			}
    }
  });
}
defineExpose({ init });
</script>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
/* ::v-deep .el-input__wrapper{
	width: 100%;
} */
</style>
